    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第二十天五角星评分end()</title>
    </head>
    <script src="jquery-3.4.1.js"></script>
    <style>
        ul{
            list-style: none;
            /*float: left;*/
            display:block;
            width: 200px;
            height: 50px;
            margin: 100px auto;
        }
        ul li{
            float: left;
            display: inline-block;
            font-size: 45px;
            color: brown;
        }
    </style>
    <body>
    <ul>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

<!--    ☆★-->
    <script>
        $(function () {
            // 需求：1.鼠标放上去li的星星变成实心，同时这个li之前的li全变实心
            //         2.鼠标点击一个li，然后这个li变实心，同时这个li之前的li也变shixin
            //         3.在步骤2的基础上，继续鼠标mouseenterli效果跟步骤1一样，另外mouseleave时候，li会停留在那个被点击的li那里，同时该li之前的li都是实心
            // 在点击的过程中，使用了一个空li作为标记，实在是高超

            var stoneHeart="★";
            var holeHeart="☆";
            // 1.鼠标放上去li的星星变成实心，同时这个li之前的li全变实心
            $("li").on("mouseenter",function () {
               // $(this).text(stoneHeart);
                $(this).text(stoneHeart).prevAll('li').text(stoneHeart).end().nextAll('li').text(holeHeart);
            })
            //         2.鼠标点击一个li，然后这个li变实心，同时这个li之前的li也变shixin

              $('li').on("click",function () {
                    $(this).attr("class","current").siblings('li').removeAttr("class","current")
              })
            $("li").on("mouseleave",function () {
                // $(this).text(stoneHeart);
                if($("li.current").length===0){
                    $("ul>li").text(holeHeart);
                }else{
                    $("li.current").text(stoneHeart).prevAll('li').text(stoneHeart).end().nextAll('li').text(holeHeart);;

                }
                // $("li.current").text(stoneHeart).prevAll('li').text(stoneHeart).end().nextAll('li').text(holeHeart);
            })
        })

    </script>
    </body>
    </html>